<template>
  <div>
    <el-form :model="dataForm" ref="form" :rules="dataRule" label-position="right" label-width="120px" inline>
      <el-row>
        <el-col :span="9">
          <el-form-item label="申请人姓名：" prop="partnerName" label-width="120px">
            <div>{{dataForm.partnerName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="申请人手机号：" prop="partnerMobile" label-width="120px">
            <div>{{dataForm.partnerMobile}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="收货人姓名：" prop="receiver" label-width="120px">
            <el-input placeholder="收货人姓名" v-model="dataForm.receiver"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="收货人手机号：" prop="receiverMobile" label-width="120px">
            <el-input placeholder="收货人手机号" v-model="dataForm.receiverMobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="收货地址：" prop="address">
            <el-input placeholder="收货地址" v-model="dataForm.address" style="width: 650px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="申请原因：" prop="reason">
            <el-input placeholder="申请原因" v-model="dataForm.reason" style="width: 650px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :space="18">
        <el-col>
          <el-form-item label="运费(元)：" prop="freight">
            <el-input v-model="dataForm.freight" type="number" placeholder="运费"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="物业合同：" prop="imgs">
            <mul-pic-upload v-model="dataForm.imgs"></mul-pic-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: flex;justify-content: flex-start">
        <span style="display: inline-block;width: 100px;text-align: right;margin-right: 15px">充电桩：</span>
          <el-col :span="18">
            <el-table :border="true" :data="dataForm.applyChargingDetailList" style="width: 400px">
              <el-table-column label="充电桩型号">
                <template slot-scope="scope">
                  <el-form-item :prop="'applyChargingDetailList.' + scope.$index + '.name'" width="200" :key="scope.$index+'name'" :rules="[ { required: true, message: '型号不能为空', trigger: 'blur' }]">
                    <el-input placeholder="充电桩型号" v-model="scope.row.name" style="width: 100%;margin-top: -10px"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="台数" width="200">
                <template slot-scope="scope">
                  <el-form-item :prop="'applyChargingDetailList.' + scope.$index + '.count'" :key="scope.$index+'count'" :rules="[ { required: true, message: '台数不能为空', trigger: 'blur' }]">
                    <el-input placeholder="台数" v-model.number="scope.row.count" style="width: 100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <!--<el-table-column label="操作" width="150">-->
                <!--<template slot-scope="scope">-->
                  <!--<div>-->
                    <!--<el-button @click="add" type="primary" icon="el-icon-plus" plain></el-button>-->
                    <!--<el-button @click="del(scope.$index)" v-if="dataForm.applyChargingDetailList.length>1?true:false" icon="el-icon-minus"></el-button>-->
                    <!--<div style="height: 20px;"></div>-->
                  <!--</div>-->
                <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </el-col>
        </el-row>
      <el-row style="margin-top: 30px">
          <el-col :span="16">
            <el-form-item style="display:flex;justify-content: center">
              <el-button type="primary" @click="save" :loading="loading">保存</el-button>
              <el-button @click="back">取消</el-button>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  import MulPicUpload from '@/components/mul-pic-upload'
  import { isEmail, isMobile } from '@/utils/validate'
  export default {
    name: 'updatePileInfo',
    components: {
      MulPicUpload
    },
    data () {
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        loading: false,
        dataForm: {
          id: '',
          partnerName: '',
          partnerMobile: '',
          receiver: '',
          receiverMobile: '',
          address: '',
          reason: '',
          freight: '',
          imgs: '',
          applyChargingDetailList: [{
            id: '',
            name: '',
            count: ''
          }]
        },
        dataRule: {
          receiver: [
            { required: true, message: '收货人姓名不能为空', trigger: 'blur' }
          ],
          receiverMobile: [
            { required: true, message: '收货人手机号不能为空', trigger: 'blur' },
            { validator: validateMobile, trigger: 'blur' }
          ],
          address: [
            { required: true, message: '收货地址不能为空', trigger: 'blur' }
          ],
          expressMoney: [
            { required: true, message: '运费不能为空', trigger: 'blur' }
          ],
          reason: [
            { required: true, message: '申请原因不能为空', trigger: 'blur' }
          ]
        }
      }
    },

    mounted () {
      this.dataForm.id = this.$route.query.id
      this.getPileInfo(this.dataForm.id)
    },

    methods: {
      add () {
        this.dataForm.applyChargingDetailList.push({
          id: '',
          name: '',
          count: ''
        })
      },
      del (index) {
        this.dataForm.applyChargingDetailList.splice(index, 1)
      },
      getPileInfo (id) {
        this.$http({
          url: this.$http.adornUrl('/v1/apply/charging/get'),
          method: 'get',
          params: this.$http.adornParams({
            id: id
          })
        }).then(({ data }) => {
          console.log(data)
          this.dataForm = data.data
        })
      },
      save() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.loading = true
            this.$http({
              url: this.$http.adornUrl('/v1/apply/charging/update'),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({ data }) => {
              this.loading = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.back()
                }
              })
            })
          }
        })
      },
      back () {
        this.$router.go(-1)
      }

    }
  }
</script>

<style scoped>
  .el-form-item{
    position: relative;
  }
  .el-input{
    width: 250px;
  }
</style>
